<template>
	<block>
		<view class="tax-refund">
			<view class="u-flex tax-refund_select" @click="shows.search = true">
				<view class="u-margin-right-8">筛选</view>
				<image src="@/static/img/icon_screen_supplier@2x.png"></image>
			</view>
			<view class="tax-refund_body" v-if="tableData.length>0">
				<view class="tax-refund_item u-margin-bottom-20" v-for="(item,index) in tableData" :key="index">
					<view class="tax-refund_details">
						<view class="u-flex u-row-between">
							<view class="u-flex">
								<view class="u-margin-right-20 u-font-28">退税金额</view>
								<view class="u-font-28">￥ {{item.amount | thousands}}</view>
							</view>
							<view class="u-font-28" style="color: #0FBD7F;">
								{{ getStatusLabel(drawbackType, item.status) }}
							</view>
						</view>
						<view class=" u-margin-top-20 u-margin-bottom-20 u-font-24" style="color:#8A8A8A ;">
							出口申请单号：{{item.carOutApplyId}}
						</view>
					</view>
					<block v-if="
					(item.billUrl && !item.sellerBankId) || 
					(item.status === 1 || item.sellerBankId)">
						<u-line color="#F2F2F2" />
						<view class="u-margin-top-20 u-flex u-row-right">
							<!-- 平台没有上传billUrl(退税单) 并且 供应商没有选择(sellerBankId)银行 -->
							<u-button v-if="item.billUrl && !item.sellerBankId" shape="circle" :custom-style="{
								'padding':'2px 26px',
								'font-size':'13px',
								'height': '26px'
							}" @click="handleConfirm(item)">确认</u-button>
							<u-button class="u-margin-left-20" v-if="item.status === 1 || item.sellerBankId"
								shape="circle" :custom-style="{
								'padding':'2px 11px',
								'font-size':'13px',
								'height': '26px'
							}" @click="handleDetails(item)">查看明细</u-button>
						</view>
					</block>
				</view>
			</view>
			<u-empty v-else src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
				margin-top="160" text="您目前还没有数据～"></u-empty>
		</view>
		<u-popup @close="shows.search = false" closeable v-model="shows.search" mode="bottom" border-radius="12">
			<view class="search-title">筛选</view>
			<view class="search-form">
				<u-form :model="querys" label-position="top">
					<u-form-item  label="出口申请单号" :border-bottom="false">
						<u-search v-model="querys.carInApplyId" height="72" :show-action="false"
							placeholder="请输入出口申请单号"></u-search>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="u-flex">
							<u-button class="u-flex-1 u-margin-right-10" shape="circle"
								@click="handleReset">重置</u-button>
							<u-button type="success" :custom-style="{
							'background':'#0FBDF',
							'color':'#fff'
						}" class="u-flex-1" shape="circle" @click="handleSelect">确定</u-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
	</block>
</template>

<script>
	import {
		drawbackType,
		getStatusLabel
	} from '@/utils/status.js'
	export default {
		data() {
			return {
				drawbackType,
				querys: {
					current: 1,
					size: 10
				},
				tableData: [],
				shows: {
					search: false
				}
			}
		},
		onShow() {
			this.handleSelect()
		},
		onReachBottom() {
			this.querys.current += 1;
			this.getTableList()
		},
		methods: {
			getTableList() {
				const params = JSON.parse(JSON.stringify(this.querys))
				const that = this
				uni.showLoading({
					title: '加载中...'
				});
				that.$api.getPageSellerList(params).then(res => {
					if (params.current === 1) {
						that.tableData = res.result.records
					} else {
						that.tableData = [...that.tableData, ...res.result.records]
					}
					uni.hideLoading();
				})
			},
			handleSelect() {
				this.querys.current = 1
				this.getTableList()
				this.shows.search = false
			},
			handleReset() {
				this.querys = {
					current: 1,
					size: 10
				}
				this.getTableList()
				this.shows.search = false
			},
			handleConfirm(item) {
				uni.navigateTo({
					url: '/pages/taxRefund/confirmTaxRefund',
					success(res) {
						res.eventChannel.emit('taxRefundItem', item)
					}
				})
			},
			handleDetails(item) {
				uni.navigateTo({
					url: `/pages/taxRefund/details?id=${item.id}`
				})
			},
			getStatusLabel
		}
	}
</script>

<style scoped lang="less">
	.search-title {
		margin-top: 30rpx;
		font-weight: bold;
		color: #202020;
		font-size: 16px;
		text-align: center;
	}
	
	.search-form {
		margin: 20px;
	
		/deep/ .u-icon-wrap {
			display: none !important;
		}
	}
	.tax-refund {
		padding-bottom: 64px;

		.tax-refund_select {
			color: #666666;
			font-size: 13px;
			padding: 10px 15px;

			&>image {
				width: 16px;
				height: 16px;
			}
		}

		.tax-refund_body {
			margin: 0 15px;

			.tax-refund_item {
				padding: 15px 15px 10px 15px;
				background: #FFFFFF;
				box-shadow: 0px 3 4px 0px rgba(217, 226, 233, 0.38);
				border-radius: 8px;

				.tax-refund_details {

					color: #202020;


				}

			}

		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>